<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #canvas {
      margin: 0 auto;
      display: block;
      width: 505px;
      height: 730px;
    }
  </style>

</head>

<body>
  <canvas id="canvas" width="505" height="730"></canvas>
</body>

<script>
  // 1.获取canvas这个DOM节点
  var canvas = document.querySelector('#canvas');
  //2.定义2d画布
  var ctx = canvas.getContext('2d');
  const img1 = new Image();
  img1.onload = () => {
    ctx.drawImage(img1, 0, 0);
    //填充文字  注意字体
    ctx.font = '30px "Microsoft YaHei"'
    ctx.fillStyle = "#ffffff";
    ctx.fillText("<%=text%>", 170, 320);

    const img2 = new Image();
    img2.onload = () => {
      ctx.drawImage(img2, 150, 340);
    }
    img2.onerror = err => {
      //  throw err 
      console.log(err);
    }
    //需要注意顺序
    img2.src = "<%=codeSrc%>";
  }
  img1.onerror = err => { console.log(err); }
  //需要注意顺序
  img1.src = "<%=bgSrc%>";



</script>

</html>